<template>
	<div class="main-nav">
		<el-tabs type="border-card">
			<el-tab-pane label="最新话题">
				<topic @settotal="gettotal"></topic>
				<paging :num="total"></paging>
			</el-tab-pane>
			<el-tab-pane label="骑友圈">
				<ridingCircle></ridingCircle>
			</el-tab-pane>
			<el-tab-pane label="官方发布">
				<official-release></official-release>
			</el-tab-pane>
			<el-tab-pane label="微视频">
				<microfilm></microfilm>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import topic from './topic/topic.vue'
	import ridingCircle from './ridingCircle/circle.vue'
	import officialRelease from './official/officialRelease.vue'
	import microfilm from './microVideo/microFilm.vue'
	import paging from './paging.vue'
	
	export default {
		components: {
			topic,
			ridingCircle,
			microfilm,
			officialRelease,
			paging,
		},
		data() {
			return {
				total: 0
			}
		},
		methods: {
			gettotal(val) {
				this.total = val
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main-nav {
		width: 70%;
		margin: 0 auto;
	}
</style>
